<template>
	<view class="pages">
		<!-- 头部 -->
		<view class="header_bar">
				<image class="logo" src="../../static/pack/logo.png" mode="widthFix"></image>
				<view class="p">帮帮乐</view>
		</view>
		
		<view class="operateBox-tabsBox">
			<view class="operateBox-tabs">
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" src="../../static/operate/phone.png" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: phone != '' }">
						<input type="text" placeholder="请输入手机号/账号" v-model="phone" placeholder-class="inputStyle"
						@blur="blurInput(1)"
						@focus="focusInput(1)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('phone')">
								<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" src="../../static/operate/password.png" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 4, showCloseBtn: password != '' }">
						<input placeholder="请输入登录密码" placeholder-class="inputStyle" v-model="password"
						:password="!eyeShowHideArray[4].show"
						@blur="blurInput(4)"
						@focus="focusInput(4)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('password')">
								<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
							</view>
							<view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(4)">
								<image :src="eyeShowHideArray[4].show ? eyeShow : eyeHide" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="text-right" @tap.stop="$tools.jump('./forget')">
					忘记密码?
				</view>
				<view class="initBtn" @tap.stop="$u.throttle(confirm,1000)">登录</view>
				<view class="to-reg" @tap.stop="$tools.jump('./register')">没有账号，<text class="red">注册新账号</text></view>
				<view class="firstBox-bottom">
					<image @tap.stop="checkArgee()" class="firstBox-bottom-img" :src="isAgree ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
					<view class="firstBox-bottom-title">我已阅读并同意</view>
					<view class="firstBox-bottom-title-choice" @tap.stop="$tools.jump('./information',1)">《平台服务协议》</view>
					<view class="firstBox-bottom-title">和</view>
					<view class="firstBox-bottom-title-choice" @tap.stop="$tools.jump('./information',2)">《隐私政策》</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { checkUpdate } from "@/components/yzhua006-update/js/app-update-check.js";
	export default {
		components:{
		},
		data(){
			return{
				phone: '',
				code: '',
				invite: '',
				password: '',
				isFocus: null,
				eyeShow: '../../static/public/icon-eye-open.png',
				eyeHide: '../../static/public/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
				isAgree: true,
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
			},
			confirm(){
				let that = this;
				if (that.phone == '' ) {
					return that.$tools.toast('请输入手机号/账号');
				}
				// if (that.phone.length!=11 || !/^((1[0-9])+\d{9})$/.test(that.phone)){
				// 	return that.$tools.toast('请输入正确的手机号码！！！');
				// }
				if (that.password == '' ) {
					return that.$tools.toast('请输入登录密码');
				}
				// var reg = /^(?![0-7]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
				// if(!reg.test(that.password)){
				// 	return that.$tools.toast('请输入6-12位字母+数字的密码');
				// }
				if (that.isAgree == false ) {
					return that.$tools.toast('请阅读并同意协议');
				}
				var data = {};
				data['account'] = that.phone;
				data['type'] = 0;
				data['password'] = that.$md5(that.password);
				console.log("data：",data);
				uni.showLoading({
					mask: true
				});
				that.$Ajax('/api/user/login',data,res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('user', res.data);
							that.$tools.toastSwitchTab('登录成功', '/pages/index/shop');
						}
					}
				)
			},
			checkArgee(){
				this.isAgree = !this.isAgree;
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/register';
	.pages{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		width: 100vw;
		background: #fff;
	}
	.header_bar{
		overflow: hidden;
		width: 100%;
		height: 466rpx;
		background:url('@/static/operate/login-top.png') no-repeat;
		background-size: 100% 100%;
		.logo{
			width: 232rpx;
			margin: auto;
			margin-top: 63rpx;
			/* #if APP-PLUS */
			margin-top: cacl( var(--status-bar-height));
			/* #endif */
		}
		.p{
			color: #fff;
			text-align: center;
			margin-top: 70rpx;
		}
	}
	.operateBox-tabsBox{
		background: #fff;
		border-radius: 88rpx 88rpx 0 0;
		padding: 62rpx 48rpx;
		padding-bottom: 40rpx;
		.title{
			font-weight: 600;
			font-size: 48rpx;
			color: rgba(0,0,0,0.9);
			line-height: 71rpx;
		}
		.p{
			font-size: 28rpx;
			color: #BDBDBD;
			line-height: 41rpx;
			margin-top: 10rpx;
		}
		.operateBox-tabs{
			margin: 0;
			margin-top: 64rpx;
		}
	}
	.operateBox-flex{
		border-radius: 0;
		border-bottom: 1px solid #ebebeb;
		background: none;
	}
	.operateBox-formBox-list-header{
		// margin: 20rpx 0;
	}
	.operateBox-formBox-listBorder{
		margin: 0rpx 0 60rpx;
	}
</style>